<template>
	<view class="chatting-main" ref="list" id="list">
		<!--    <view v-if="TESTING" class="clear-chat" @click="clearChatMessage">清空(测试)</view>-->
		<view v-if="isUSER_ORIENTED" style="position: fixed;width: 100%;top: 0;background-color: #FFFFFF;z-index: 998;">
			<!-- #ifdef APP-PLUS -->
			<view class="device-status_bar"></view>
			<!-- #endif -->
			<view class="inform">
				{{userChatTo.name}}
				<view class="report" @click="report">举报</view>
				<image src="../../static/z.png" mode="aspectFit"
					style="position: absolute;top: 26rpx;width: 32rpx;height: 32rpx;left: 30rpx;" @click="black">
				</image>
			</view>
		</view>
		<scroll-view :scroll-into-view="scrollViewId" class="msg-list-main" :style="msgListStyle" scroll-y
			:scroll-with-animation="scrollAnimation" :enable-back-to-top="true">
			<!-- #ifdef APP-PLUS -->
			<view class="device-status_bar"></view>
			<!-- #endif -->
			<view :style="{'padding-top':isUSER_ORIENTED?'100rpx':0}"></view>
			<view class="more" :id="prefix + 'more'" v-if="hasMoreMessage" @click="getMoreMsg">获取更多
			</view>
			<!--     消息列表 -->
			<view class="" v-for="(msgItem, index) in chatHistoryList" :key="index" :id="prefix + index">
				<view class="time-message-block">
					<!--          <view class="time">{{'todoz'}}</view>-->
					<!--        消息块 START-->
					<view>
						<view class="opposite" :class="judgeIsFromOpposite(msgItem) ? '' : 'mine'">
							<view class="profile-photo" :style="{
                  backgroundImage:
                    'url(' +
                    profilePhoto(
                      judgeIsFromOpposite(msgItem) ? userChatTo : currentUser
                    ) +
                    ')',
                }"></view>
							<!--             房卡消息-->
							<view v-if="msgItem.messageType === houseCardMessageType" class="house-card-container"
								style="">
								<view class="house-card-wrapper" style="height: 360rpx">
									<chat-house-card :message-house-item="msgItem.content.content">
									</chat-house-card>
								</view>
								<!--                <view>房卡{{msgItem.content.content}}</view>-->
							</view>

							<!--              图片消息-->
							<view @click="topreviewimage(msgItem)" v-else-if="msgItem.messageType === messageType.IMAGE"
								class="image-message" :style="{
                  'background-image': 'url(' + msgItem.content.imageUri + ')',
                }">
							</view>

							<!--         语音消息    音频信息 -->
							<view v-else-if="
                  msgItem.messageType === messageType.AUDIO &&
                  msgItem.content.duration >= 1
                " @tap="playVoice(msgItem)" class="message-block"
								:class="playMsgid === msgItem.messageUId ? 'play' : ''"
								:style="playMsgid === msgItem.messageUId ? playVoiceStyle:''"
								style="width: 50vw; transition: all 0.1s linear">
								<view class="bubble voice" style="display: flex; justify-content: space-between"
									:class="playMsgid === msgItem.messageUId ? 'play' : ''">
									<view class="length">{{
                      (msgItem.content.duration < 1
                        ? msgItem.content.duration + 1
                        : msgItem.content.duration) + 's'
                    }}
									</view>
									<view class="icon my-voice"></view>
								</view>
								<view class="msg-time">{{
                  rongChatTime(msgItem.sentTime)
                }}</view>
							</view>

							<!--              文本消息  -->
							<view v-else-if="msgItem.messageType === messageType.TEXT" class="message-block">
								<text>{{ msgItem.content.content }}</text>
								<view class="msg-time" v-if="rongChatTime(msgItem.sentTime)">
									{{ rongChatTime(msgItem.sentTime) }}
								</view>
							</view>

							<view v-else class="message-block">[文件损坏]</view>
						</view>
					</view>
					<!--        消息块END -->
				</view>
			</view>

			<view class="house-card-container">
				<view :id="prefix + 'chattingHouseItem'" class="house-card-wrapper" v-if="chattingHouseItem.id">
					<chat-house-card :ready-house-item="chattingHouseItem">
					</chat-house-card>
					<view class="send-house-card-button" @click="sendHouseCard">
						发送
					</view>
				</view>
			</view>
		</scroll-view>

		<!--    输入栏 -->
		<!--    <view class="chat-input-bar" style="background-color: red;"></view>-->
		<!--    -->
		<view class="chat-input-bar" ref="chatInputBar">
			<view class="input-bar-main">
				<!-- #ifndef H5 -->
				<view v-if="!voiceMode" class="voice-icon" @click="switchInput"></view>
				<view v-if="voiceMode" class="keyboard-icon" @click="switchInput"></view>
				<!-- #endif -->
				<!--      文本输入 -->
				<view v-if="!voiceMode" class="input-area">
					<view class="uni-form-item uni-column">
						<view class="uni-input-wrapper">
							<textarea ref="textArea" maxlength="140" show-confirm-bar="true" fixed="true"
								class="uni-input" placeholder="想跟TA说点什么呢" v-if="!voiceMode" auto-height="true"
								v-model="inputMessage" confirm-type="send" @focus="textareaFocus(true)"
								@blur="textareaBlur" @click="hideEmoji" />
						</view>
					</view>
				</view>
				<!--      语音输入-->
				<view v-if="voiceMode" class="input-area voiceArea">
					<view class="uni-form-item uni-column" @touchstart="voiceBegin" @touchmove.stop.prevent="voiceIng"
						@touchend="voiceEnd" @touchcancel="voiceCancel">
						<view class="uni-input-wrapper" style="width: 68vw">
							<view style="font-size: 13px; color: #232323">{{
                voiceTis
              }}</view>
						</view>
					</view>
				</view>

				<view class="emoji-icon" @click="popupEmoji()" style=""></view>
				<view class="add-icon" style="" @click="toSendImage()"></view>
				<view v-if="!voiceMode" @click="sendMessage()" class="blue-wide-button send-btn" style="">发送
				</view>
			</view>

			<view class="popup-area">
				<emoji-popup @emojiSelected="appendEmoji"></emoji-popup>
			</view>
		</view>

		<!-- 录音UI效果 -->
		<view class="record" :class="recording ? '' : 'hidden'">
			<view class="ing" :class="willStop ? 'hidden' : ''">
				<view class="icon luyin2"></view>
			</view>
			<view class="cancel" :class="willStop ? '' : 'hidden'">
				<view class="icon chehui"></view>
			</view>
			<view class="tis" :class="willStop ? 'change' : ''">{{ recordTis }}</view>
		</view>
	</view>
</template>
<script>
	import {
		CHATTER_TO,
		getTime,
		MSG_TYPE,
		rongEvent,
	} from '../../util/rongCloud/messaging';
	import {
		uniChooseImage,
		uniGetStorageSync,
		uniSetStorageSync,
	} from '../../util/funcs';
	import {
		beforeForSendFile,
		cloudSendMessage,
		getHistoryMsg,
		getMoreHistory,
		getOppoIdFrom,
		imService,
		RongIMLib,
	} from '../../util/rongCloud/cloudUtil';
	import {
		TEST_WITH_PC,
		TEST_WITH_PORTAL,
		TESTING
	} from '../../util/test';
	import {
		CHAT_HOUSE_CARD,
		CURRENT_USER_KEY,
		isBlank,
		lastTimeHouse,
		TOAST_DURATION,
		uniShowToast,
		uniNavigate
	} from '../../util/misc';
	import airport from '../../common/airport.js';
	import {
		filter
	} from '../../util/reuse/filter';
	import {
		uploadQiNiu
	} from '../../util/rongCloud/fileUtil';
	import {
		appMixin
	} from '../../util/reuse';
	import {
		chatMixin
	} from '../../util/reuse/chatMixin';
	import {
		uniHideLoading,
		uniShowLoading
	} from '../../util/commonFuncs';
	import emojiPopup from './emojiPopup';
	import {
		USER_ORIENTED
	} from '../../util/config';
	import chatHouseCard from './chatHouseCard';

	export default {
		computed: {
			msgListStyle: {
				get() {
					if (this.sEmojiActive) {
						return 'margin-bottom: 63vw';
					} else {
						return '';
					}
				},
			},
		},
		watch: {
			chatHistoryList() {
				console.log('chatHistoryList', this.chatHistoryList);
			},
		},
		components: {
			emojiPopup,
			chatHouseCard,
		},
		props: {
			showSelect: {
				type: Boolean,
				default: false,
			},
		},
		mixins: [filter, appMixin, chatMixin],
		data() {
			return {
				isUSER_ORIENTED: USER_ORIENTED,
				playVoiceStyle: '', //播放语音样式
				throttleTimer: null,
				previewingImage: false,
				hasMoreMessage: true,
				// 存放历史消息
				chatHistoryList: [],
				houseCardMessageType: CHAT_HOUSE_CARD,
				chattingHouseItem: {},
				cursorPosition: 0,
				showEmoji: true,
				// 和后台admin聊天
				testWithPc: TEST_WITH_PC,
				// 第一次滚不要, 接发消息之后菜肴
				scrollAnimation: false,
				// 录音时长
				recordLength: 0,
				// 录音定时器 , setInterval
				recordTimer: null,
				// 用于设置语音播放ui效果, 语音id
				playMsgid: null,
				initPoint: {
					identifier: 0,
					Y: 0
				}, // 记录移动位置
				//播放语音相关参数
				AUDIO: uni.createInnerAudioContext(),
				// 录音器
				RECORDER: uni.getRecorderManager(),
				recordTis: '语音输入中', // 录音提示
				willStop: false, // 是否停止录音
				inputting: false,
				// false键盘, true 语音
				voiceMode: TESTING ? true : false,
				recording: false,
				voiceTis: '按住 说话', // 语音bar文本
				// 聊天对象
				userChatTo: {},
				// 输入文本
				inputMessage: '',
				prefix: 'messageBlock',
				options: airport.list,
				lists: [{
						title: 'A'
					},
					{
						title: 'B'
					},
					{
						title: 'C'
					},
					{
						title: 'D'
					},
					{
						title: 'E'
					},
					{
						title: 'F'
					},
					{
						title: 'G'
					},
					{
						title: 'H'
					},
					{
						title: 'i'
					},
					{
						title: 'j'
					},
					{
						title: 'k'
					},
					{
						title: 'l'
					},
				],
				scrollViewId: '',
				messageType: MSG_TYPE(),
			};
		},
		onShow: async function() {
			// console.log('on show')
			if (!this.chatContextInited) {
				uniShowLoading('加载中');
				setTimeout(uniHideLoading, TOAST_DURATION);
			}
			this.setChatterInfo();
			if (USER_ORIENTED) {
				uni.setNavigationBarTitle({
					title: this.userChatTo.name,
				});
			} else {
				uni.setNavigationBarTitle({
					title: this.userChatTo.userNamed || this.userChatTo.name,
				});
			}
			// console.log('userChatTo: ', this.userChatTo);

			/**
			 * @description 聊天注册事件 START
			 * */
			this.add_listenToNewMessage();
			this.registerRecorderEvents();
			this.initHouseCard();
			// 聊天注册事件 END

			await this.initChatList();

			this.clearInputMessage();
			this.previewingImage = false;
		},
		onHide() {},
		onUnload: async function() {
			// console.log("onUnload chatting");
			this.set_sEmojiActive(false);
			this.removeEventListen();
			this.clearHouseCard();
			await this.markAsRead();
			this.updateGlobalConversation();
		},

		methods: {
			black() {
				uni.navigateBack()
			},
			report() {
				console.log(this.userChatTo)
				uniNavigate(`/report/report?id=${this.userChatTo.rongcloud_id}&name=${this.userChatTo.name}`);
			},
			topreviewimage(msgItem) {
				toPreviewImage(msgItem.content.imageUri, 0, () => {
					this.previewingImage = true;
					this.chattingHouseItem = {};
				})
			},
			async markAsRead() {
				if (this.chatHistoryList[0]) {
					let targetId = getOppoIdFrom(this.chatHistoryList[0]);
					// console.log(targetId);
					await this.markConversationAsRead(targetId);
				}
			},
			async getMoreMsg() {
				// console.log(this.chatHistoryList[0])
				let timeStamp = this.chatHistoryList[0].sentTime;
				let targetId = getOppoIdFrom(this.chatHistoryList[0]);
				let result = await getMoreHistory(targetId, timeStamp);
				this.hasMoreMessage = !!result.hasMore;
				for (let len = result.list.length, index = len - 1; index >= 0; index--) {
					let newMsg = result.list[index];
					this.chatHistoryList.unshift(newMsg);
				}
			},
			async sendHouseCard() {
				// 保存上次聊的房子, 下次如果还是聊这个房子就不能发送
				await this.sendMessage({
						content: JSON.stringify(this.chattingHouseItem),
					},
					CHAT_HOUSE_CARD
				);
				uniSetStorageSync(
					lastTimeHouse(this.userChatTo.rongcloud_id),
					this.sHouseItem
				);
			},
			playAudioEffect(msgItem) {
				if (msgItem.messageUId !== this.playMsgid) return '';
				setTimeout(() => {
					return '';
				}, msgItem.content.duration * 1000);
				if (msgItem.senderUserId === this.currentUser.id.toString()) {
					return 'background-color: #0951b6';
				} else {
					return 'background-color: #c6ceda';
				}
			},
			hideEmoji() {
				if (this.sEmojiActive) this.set_sEmojiActive(false);
			},
			appendEmoji(val) {
				console.log(val, this.cursorPosition);
				// let toLast =  this.inputMessage.length - this.cursorPosition
				this.inputMessage =
					this.inputMessage.slice(0, this.cursorPosition) +
					val +
					this.inputMessage.slice(this.cursorPosition);
				console.log(val.length);
				this.cursorPosition += val.length;
			},
			popupEmoji() {
				this.chattingHouseItem = {};
				this.voiceMode = false;
				setTimeout(this.scrollToBottom);
				this.set_sEmojiActive(!this.sEmojiActive);
			},
			async initHouseCard() {
				if (this.sHouseItem && this.sHouseItem.id) {
					let lastTime = uniGetStorageSync(
						lastTimeHouse(this.userChatTo.rongcloud_id)
					);
					// console.log('lastTime house: ', lastTime)
					if (
						lastTime.id === this.sHouseItem.id &&
						lastTime.showSellPrice === this.sHouseItem.showSellPrice
					)
						return; // 判断是不是聊的同一个

					// 聊天卡片数据结构
					this.chattingHouseItem = {
						id: this.sHouseItem.id,
						title: this.sHouseItem.title,
						room_hall: this.sHouseItem.room_hall,
						house_area: this.sHouseItem.house_area,
						house_price: this.sHouseItem.house_price,
						house_thumb: this.sHouseItem.house_thumb,
						house_sell_price: this.sHouseItem.house_sell_price,
						showSellPrice: this.sHouseItem.showSellPrice,
					};
				}
			},
			async clearHouseCard() {
				this.set_sHouseItem(null);
				this.chattingHouseItem = {};
			},
			async setChatterInfo() {
				this.userChatTo = uniGetStorageSync(CHATTER_TO);
				return this.userChatTo;
			},
			registerRecorderEvents() {
				//语音自然播放结束
				this.AUDIO.onEnded((res) => {
					this.playMsgid = '';
					console.log('播放结束');
				});
				// #ifndef H5
				//录音开始事件
				this.RECORDER.onStart((e) => {
					this.recordBegin(e);
				});
				//录音结束事件
				this.RECORDER.onStop((e) => {
					this.recordEnd(e);
				});
				// #endif
			},
			// 播放语音
			playVoice(msg) {
				// console.log(msg)
				try {
					if (!msg) return;
					this.playMsgid = msg.messageUId;
					this.playVoiceStyle = this.playAudioEffect(msg)
					this.AUDIO.src = msg.content.remoteUrl;
					this.$nextTick(this.AUDIO.play());
				} catch (e) {
					console.log('播放错误:', e, msg);
				}
			},
			// 录音开始
			voiceBegin(e) {
				if (e.touches.length > 1) {
					return;
				}
				this.initPoint.Y = e.touches[0].clientY;
				this.initPoint.identifier = e.touches[0].identifier;
				// #ifdef APP-PLUS
				this.RECORDER.start({
					format: 'mp3'
				}); //录音开始,
				// #endif
			},
			//录音开始 UI 效果
			recordBegin(e) {
				this.recording = true;
				this.voiceTis = '松开 结束';
				this.recordLength = 0;
				this.recordTimer = setInterval(() => {
					this.recordLength++;
				}, 1000);
			},
			// 录音被打断
			voiceCancel() {
				this.recording = false;
				this.voiceTis = '按住 说话';
				this.recordTis = '手指上滑 取消发送';
				this.willStop = true; //不发送录音
				clearInterval(this.recordTimer);
				this.RECORDER.stop(); //录音结束
			},
			// 录音中(判断是否触发上滑取消发送)
			voiceIng(e) {
				if (!this.recording) {
					return;
				}
				let touche = e.touches[0];
				//上滑一个导航栏的高度触发上滑取消发送
				if (this.initPoint.Y - touche.clientY >= uni.upx2px(100)) {
					this.willStop = true;
					this.recordTis = '松开手指 取消发送';
				} else {
					this.willStop = false;
					this.recordTis = '手指上滑 取消发送';
				}
			},
			// 结束录音
			voiceEnd(e) {
				if (!this.recording) {
					return;
				}
				this.recording = false;
				this.voiceTis = '按住 说话';
				this.recordTis = '手指上滑 取消发送';
				this.RECORDER.stop(); //录音结束
			},
			//录音结束(回调文件),  校验成功则发送音频
			async recordEnd(e) {
				clearInterval(this.recordTimer);
				if (!this.willStop) {
					// 发送
					clearInterval(this.recordTimer);
					if (this.recordLength < 1 && !TEST_WITH_PORTAL) {
						// 校验录音长短
						uniShowToast('录音时间过短, 最起码1秒', false);
						return;
					}

					console.log('e: ' + JSON.stringify(e));
					let voiceMessage = await createVoiceMessage.call(this, e);

					/**
					 * 创建音频信息
					 * @return {{length: number , url}}
					 */
					async function createVoiceMessage(e) {
						// 获取token
						let {
							token
						} = await beforeForSendFile(RongIMLib.FILE_TYPE.AUDIO);
						// 构造一个fileRes
						let fileRes = {
							tempFilePaths: [e.tempFilePath],
						};
						// 获取下载url
						let url = await uploadQiNiu(
							fileRes,
							token,
							RongIMLib.FILE_TYPE.AUDIO
						);
						return {
							duration: this.recordLength,
							remoteUrl: url,
							type: 'aac',
						};
					}

					this.sendMessage(voiceMessage, MSG_TYPE().AUDIO);
				} else {
					console.log('取消发送录音');
				}
				this.willStop = false;
			},

			textareaFocus() {
				this.inputting = true;
			},
			textareaBlur(e) {
				this.cursorPosition = e.detail.cursor;
			},
			switchInput() {
				this.hideEmoji();
				this.voiceMode = !this.voiceMode;
			},
			judgeIsFromOpposite(msgItem) {
				// console.log('msgItem: ',msgItem);
				return msgItem.senderUserId !== this.currentUser.rongcloud_id;
			},
			/**
			 * 融云文件类信息发送参照代码: https://github.com/rongcloud/websdk-demo/tree/master/miniprogram-upload
			 */
			async toSendImage() {
				this.chattingHouseItem = {};
				this.hideEmoji();
				let _this = this;

				let {
					token
				} = await beforeForSendFile();
				uniChooseImage({
					success: async function(chooseRes) {
						// console.log('chooseRes:', chooseRes)
						if (chooseRes.tempFiles[0].size > 8 * 1024 * 1000) {
							//上传图片大小限制
							uniShowToast('上传图片不可大于8MB');
						}
						let [
							// resultBase64,
							imageUri,
						] = await Promise.all([
							// pathToBase64(chooseRes.tempFiles[0].path),
							uploadQiNiu(chooseRes, token),
						]);
						// console.log('resultBase64: ',resultBase64, )
						let resultBase64 = 'data:image/png;';
						let resMsg = await cloudSendMessage({
								imageUri: imageUri.toString(),
								content: resultBase64,
							},
							MSG_TYPE().IMAGE
						);
						// console.log('resMsg', resMsg)
						_this.updateChatList(resMsg);
					},
				});
			},
			clearConversationUnread() {},
			async afterChatListUpdate() {
				this.$nextTick(() => {
					this.scrollToBottom();
				});
				if (this.chatHistoryList.length < 20) {
					this.hasMoreMessage = false;
				}
				uniHideLoading();
				this.chatContextInited = true;
			},
			async initChatList() {
				let _this = this;
				if (this.previewingImage) return;
				getHistoryMsg()
					.then((res) => {
						_this.chatHistoryList = res.list;
					})
					.catch((error) => {
						console.log(error);
						uni.$once(rongEvent.connectSuccess, async () => {
							let result = await getHistoryMsg();
							// 只有链接成功了才能获取消息信息
							this.chatHistoryList = result.list;
							this.afterChatListUpdate();
						});
					})
					.finally(() => {
						_this.afterChatListUpdate();
					});
			},
			scrollToBottom() {
				// 自动根据消息多少滚到最后一条
				let _this = this;
				this.$nextTick(() => {
					// 最好的版本
					let len = _this.chatHistoryList.length;
					_this.scrollViewId = _this.prefix + (len - 1);

					if (!this.scrollAnimation) {
						setTimeout(() => {
							this.scrollAnimation = true;
						}, 500);
					}
				});
			},
			async clearChatMessage() {
				let _this = this;
				var conversation = imService.Conversation.get({
					targetId: _this.chatHistoryList[0].targetId,
					type: RongIMLib.CONVERSATION_TYPE.PRIVATE,
				});
				conversation.destory().then(function() {
					console.log('删除会话成功');
				});
			},
			// 更新当前页消息列表
			updateChatList(latestMessage) {
				if (!latestMessage || latestMessage.messageType == "RC:SRSMsg") return;

				// this.removeEventListen() // 融云的实现机制会导致触发多次
				let currentLast = this.chatHistoryList[
					this.chatHistoryList.length - 1
				] || {
					messageUId: ''
				};
				if (
					latestMessage &&
					latestMessage.messageUId != currentLast.messageUId // 只有在uid是不一样的时候才更新列表
				) {
					let tem = [].concat(this.chatHistoryList);
					// tem.push(latestMessage)
					this.chatHistoryList.push(latestMessage);
					this.scrollToBottom();
					// this.addEventListen()
				}
			},
			/**
			 * 注册监听聊天消息事件, 用于更新聊天列表
			 */
			add_listenToNewMessage() {
				uni.$on(rongEvent.chattingMessageSuccess, this.updateChatList);
			},
			removeEventListen() {
				uni.$off(rongEvent.chattingMessageSuccess, this.updateChatList);
			},
			clearInputMessage() {
				if (TESTING) {
					// this.inputMessage = 'test ' + getTime()
					this.inputMessage = 'test ' + getTime();
				} else {
					this.inputMessage = '';
				}
			},
			async sendMessage(msgObj, msgType) {
				if (this.chattingHouseItem.id) this.chattingHouseItem = {};

				if (!msgObj) {
					if (isBlank(this.inputMessage)) {
						// 非空校验
						uniShowToast('发送消息不可为空', false);
						return;
					}
					msgObj = {
						content: this.inputMessage,
					};
				}
				let res = await cloudSendMessage(msgObj, msgType);
				this.clearInputMessage();
			},
		},
	};
</script>

<style lang="scss" scoped>
	@import '../../assets/styles/global';
	@import 'css/style';

	.inform {
		height: 88rpx;
		text-align: center;
		line-height: 88rpx;
		font-weight: bold;
		width: 100%;
		position: relative;
		font-size: 32rpx;
		background-color: #FFFFFF;
		z-index: 998;
		border-bottom: 1px solid #CCCCCC;
	}

	.report {
		position: absolute;
		font-size: 24rpx;
		width: 80rpx;
		height: 40rpx;
		line-height: 40rpx;
		top: 24rpx;
		right: 30rpx;
		background-color: #004FBF;
		color: #FFFFFF;
		border-radius: 8rpx;
	}

	.quick-test {
		height: 100px;
		background-color: yellow;
		border: 1px solid;
	}

	$borderRadiusDegree: 3vw;

	page {}

	@mixin borderBottomRadius {
		border-bottom-right-radius: $borderRadiusDegree;
		border-bottom-left-radius: $borderRadiusDegree;
	}

	.clear-chat {
		position: fixed;
		@include center;
		font-size: 3vw;
		top: 88px;
		left: 0;
		z-index: 5;
		height: 10vw;
		width: 10vw;
		background-color: $blueBorderColor;
		color: white;
	}

	.chatting-main {
		// 注意 这个是scroll into view 奏效的必要属性
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		display: flex;
		flex-direction: row;

		.msg-list-main {
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
			box-sizing: content-box;
			top: 0;
			/*margin-top: 3vw;*/
			margin-bottom: 13vw;
			flex: 1;
			position: relative;

			/*background-color: yellow;*/
			.more {
				margin-top: 3vw;
				width: 100vw;
				@include center;
				color: rgba(128, 128, 128, 0.48);
				font-size: 15px;
				margin-bottom: 5vw;
			}
		}

		.time-message-block {
			padding: 20rpx 17px 20rpx 17px;
			width: 100%;
			position: relative;

			.time {
				margin-top: 5px;
				width: 100%;
				@include center;
				height: 20px;
				font-size: 14px;
				color: #c8c9cc;
				margin-bottom: 15px;
			}

			.opposite,
			.mine {
				display: flex;
				justify-content: flex-start;
				align-items: flex-start;

				.profile-photo {
					@include cover-no-repeat-center;
					width: 40px;
					height: 40px;
					background-color: #d8d8d8;
					border-radius: 50%;
					margin-right: 13px;
				}

				.message-block {
					padding: 5rpx 20rpx 2rpx;
					max-width: 78vw;
					min-height: 65rpx;
					background-color: #ebedf0;
					line-height: 6vw;
					border-top-left-radius: 0;
					border-top-right-radius: $borderRadiusDegree;
					font-size: 4vw;
					//@include center;
					display: flex;
					flex-direction: column;
					@include borderBottomRadius;

					.bubble {
						width: 100%;
						height: 100%;
						@include center;
						justify-content: space-between;

						.icon {
							font-size: 4vw;
						}

						.my-voice {
							// 调用别人的图标库, 命名记住my-voice就行
							color: #494949;
							transform: rotate(180deg);
						}
					}

					.msg-time {
						font-size: 19rpx;
						color: #636363;
						width: 100%;
						text-align: right;
					}
				}

				.image-message {
					background-color: black;
					width: 24vw;
					height: 29vw;
					border-radius: 1vw;
					@include contain-no-repeat-center;

					.image {}
				}
			}

			.mine {
				flex-direction: row-reverse;

				.profile-photo {
					margin-right: 0;
					margin-left: 13px;
				}

				.message-block {
					background-color: #183a6a;
					color: white;
					@include borderBottomRadius;
					border-top-left-radius: $borderRadiusDegree;
					border-top-right-radius: 0 !important;

					.msg-time {
						color: #93bdff;
						text-align: left;
					}

					.bubble {
						.my-voice {
							color: white;
							transform: rotate(0deg);
						}
					}
				}
			}
		}

		.house-card-container {
			@include center;
			/*padding: 10px 15px 15px;*/
			padding-top: 20rpx;
			padding-right: 0;
			padding-bottom: 20rpx;
			height: auto;

			.house-card-wrapper {
				background-color: whitesmoke;
				border-radius: 2vw;
				width: 60vw;
				display: flex;
				flex-direction: column;
				padding: 2vw;
				@include center;
				@include borderBox;

				.send-house-card-button {
					margin-top: 2vw;
					height: 5vw;
					width: 15vw;
					background-color: #f56c6c;
					color: white;
					@include center;
					border-radius: 1vw;
					position: relative;
					right: -20vw;
					font-size: 12px;
				}
			}
		}

		.chat-input-bar {
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
			box-sizing: content-box;
			background-color: white;
			position: fixed;
			bottom: 0;
			display: flex;
			align-items: flex-start;
			flex-direction: column;
			width: 100vw;
			min-height: 50px;
			box-shadow: 0px -2px 4px 0px rgba(0, 0, 0, 0.06);

			.input-bar-main {
				padding: 10px 5px 5px;
				display: flex;
				align-items: flex-start;
				height: 50px;
				@include borderBox;

				.send-btn {
					height: 7vw;
					width: 12vw;
					font-size: 26rpx;
					box-shadow: none;
					border-radius: 1vw;
					margin-top: 1px;
					//margin-right: -11px;
					//margin-left: -11px;
				}

				.voice-icon,
				.keyboard-icon,
				.emoji-icon,
				.add-icon {
					margin: 3px 2vw 0px;
					height: 6vw;
					width: 6vw;
					@include contain-no-repeat-center;
				}

				.emoji-icon {
					background-image: url('@/static/images/chat/biaoqingIcon@3x.png');
				}

				.add-icon {
					background-image: url('@/static/images/chat/tianjiaIcon@3x.png');
				}

				.voice-icon {
					background-image: url('@/static/images/chat/yuyin_icon@3x.png');
				}

				.keyboard-icon {
					/*margin-top: 0;*/
					/*margin-right: 1vw;*/
					@include cover-no-repeat-center;
					background-image: url('@/static/images/chat/jianpan_icon@3x.png');
					/*height: 33px;*/
					/*width: 33px;*/
				}

				.emoji-icon {}

				.input-area {
					.uni-input-wrapper {
						padding: 0 10px;
						@include center;
						// #ifdef H5
						width: 64vw;
						// #endif
						// #ifndef H5
						width: 54vw;
						// #endif
						min-height: 28px;
						background-color: #f5f5f5;
						border-radius: 4px;

						.uni-input {
							width: 100%;
							font-size: 13px;
							max-height: 69px;
						}
					}
				}

				.textbox {
					width: 57vw;

					/*min-height: 70upx;*/
					/*margin-top: 15upx;*/
					.voice-mode,
					.text-mode {
						border-radius: 2vw;
					}

					.voice-mode {
						width: calc(100% - 1px);
						height: 34px;
						border: solid 1upx #cdcdcd;
						@include center;
						font-size: 14px;
						background-color: #f5f5f5;
						color: #555;

						&.recording {
							background-color: #e5e5e5;
						}
					}

					.text-mode {
						width: 100%;
						min-height: 70upx;
						display: flex;
						background-color: #fff;

						.box {
							width: 100%;
							padding-left: 30upx;
							min-height: 70upx;
							display: flex;
							align-items: center;

							textarea {
								width: 100%;
							}
						}

						.em {
							flex-shrink: 0;
							width: 80upx;
							padding-left: 10upx;
							height: 70upx;
							display: flex;
							justify-content: center;
							align-items: center;
						}
					}
				}

				.voiceArea {
					.uni-input-wrapper {
						&:active {
							background-color: #ececec !important;
						}
					}
				}
			}

			.popup-area {
				width: 100vw;
				/*height: 100px;*/
			}
		}
	}
</style>
